<!--新建剪辑长视频-->
<template>
  <el-drawer
    size="75%"
    :title="titleName"
    :visible="visible"
    @close="updateVisible(false)">
    <el-form
      :show-message="false"
      :hide-required-asterisk="false"
      ref="form"
      :rules="rules"
      :model="form"
      label-width="110px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <div class="padding20">
        <el-form-item label="剪辑名称" prop="clipName">
          <el-input v-model="form.clipName" placeholder="请输入剪辑名称" />
        </el-form-item>
        <!--上传视频start-->
        <el-form-item label="上传视频" prop="mediaId"
                      :rules="!form.mediaId ? { required: true, message: '请上传视频', trigger: ['blur','change']} : {required: false}">
          <el-upload
            :disabled="loading2 || loading3"
            class="el-upload-class"
            :show-file-list="false"
            :auto-upload="false"
            :action="ossUrl"
            accept=".mp4,.3gp,.mov"
            :multiple="false"
            :on-change="uploadClickVideo"
            :file-list="fileList">
            <el-button class="width100" :loading="loading2">+点击上传视频素材</el-button>
          </el-upload>
        </el-form-item>
        <!--单个上传 -->
        <div class="video-flex" v-if="form.videoUrl">
          <div class="uoload-video-title">上传视频</div>
          <div class="relative">
            <video :src="form.videoUrl" style="height: 222px;width: auto;object-fit: cover;" @click="videoPreview(i)"></video>
            <el-button @click="clearVideo" icon="el-icon-close" class="del-video-btn flex"></el-button>
          </div>
        </div>
        <div class="color666" style="padding: 10px 110px 20px;">注：请上传最大不超过300M且最低不得低于1分钟时长的视频</div>
        <!--上传视频end-->

        <!--视频文字-->
        <el-form-item label="视频标题" prop="name">
          <div class="video-padding m-right10 default relative" style="border-radius: 5px;border:1px solid #ddd" v-if="form.longVideoTexts && form.longVideoTexts.length>0">
            <div class="video-title">{{form.longVideoTexts[0].content}}</div>
            <div class="flex-between d-text">
              <div class="flex-columns flex1">
                <div class="video-title2" v-if="form.longVideoTexts.length>1">{{form.longVideoTexts[1].content}}</div>
                <div class="video-title3" v-if="form.longVideoTexts.length>2">{{form.longVideoTexts[2].content}}</div>
              </div>
              <div class="d-edit-all flex-align-center">
                <el-button icon="el-icon-edit" size="mini" class="d-edit" @click="edit(form.longVideoTexts)"></el-button>
                <el-button icon="el-icon-delete" size="mini" class="d-edit" @click="delClick()"></el-button>
              </div>
            </div>
          </div>
          <div class="video-padding flex" style="border-radius: 5px;border:1px solid #ddd" @click="newFont" v-else>
            <div style="color: #5F6C83;" class="flex-align-center pointer"><i class="el-icon-plus" style="font-size: 16px;margin-right: 3px"></i>全程标题</div>
          </div>
        </el-form-item>

        <el-form-item label="背景音乐" prop="name"  class="check-star">
          <el-radio-group v-model="form.musicSettings" @input="misicClick">
            <el-radio :label="1">热门音乐</el-radio>
            <el-radio :label="2">自己上传</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--修改111 end-->
        <div v-if="form.musicSettings==1">
          <el-form-item label="背景音乐类型" class="check-star">
            <el-select
              clearable
              v-model="musicType"
              placeholder="请选择背景音乐类型"
              class="ele-fluid"
              @change="changeCategory"
            >
              <el-option :label="i.name" :value="i" v-for="(i,j) in mcList" :key="j" />
            </el-select>
          </el-form-item>
          <el-form-item label="背景音乐" class="check-star" prop="bgmId"
                        :rules="!form.bgmId  ? { required: true, message: '请选择背景音乐', trigger: ['blur','change']} : {required: false}" >
            <div class="s-musiz-class" :style="!form.bgmId && hint  ?'border:1px solid #ff4d4f;' : ''">
              <div class="flex-align-center m-bottom5">
                <img src="@/assets/music.png" v-if="form.backgroundMusic" />
                <el-select
                  v-model="form.backgroundMusic"
                  placeholder="请选择背景音乐"
                  class="ele-fluid music-select-class"
                  @change="getMusics"
                >
                  <el-option :label="i.title" :value="i" v-for="(i,j) in musicLists" :key="j" />
                </el-select>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="form.musicSettings==2">
          <el-form-item label="背景音乐"  prop="bgmId"
                        :rules="!form.bgmId ? { required: true, message: '请上传背景音乐', trigger: ['blur','change']} : {required: false}">
            <!--:before-upload="beforeAvatarUpload"-->
            <el-upload
              :disabled="loading3 || loading2"
              class="el-upload-class"
              :show-file-list="false"
              :auto-upload="false"
              :action="ossUrl"
              accept=".mp3,.m4a,.aac"
              :multiple="false"
              :on-change="uploadClickBj"
              :file-list="fileList">
              <el-button class="width100" :loading="loading3">+点击上传背景音乐</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="背景音乐" v-if="form.backgroundMusic"
          >
            <div class="d-musiz-class">
              <div class="flex-between m-bottom5">
                <div class="flex-align-center">
                  <img src="@/assets/music.png" />
                  {{form.backgroundMusic ? form.backgroundMusic : form.backgroundMusic}}
                </div>
                <el-button @click="clearBgm" icon="el-icon-close"></el-button>
              </div>
            </div>
          </el-form-item>

        </div>

        <el-row class="padding">
          <el-col :span="12">
            <el-form-item label="背景音量" prop="name">
              <el-slider
                class="m-left20 slider-class width90"
                :max="10"
                input-size="mini"
                v-model="form.backgroundVolume"
                show-input>
              </el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频原声" prop="name">
              <el-slider
                class="m-left20 slider-class width90"
                :max="10"
                input-size="mini"
                v-model="form.videoVolume"
                show-input>
              </el-slider>
            </el-form-item>
          </el-col>
        </el-row>





        <!--<el-form-item label="解说设置" prop="name"  class="check-star">
          <el-radio-group v-model="form.explanationSettings" @input="explainSet">
            <el-radio :label="1">自己上传</el-radio>
            <el-radio :label="2">AI配音</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.explanationSettings==1" class="no-check-star">
          <el-form-item label="全程解说" prop="explainId"
                        :rules="!form.explainId  ? { required: true, message: '请上传全程解说', trigger: ['blur','change']} : {required: false}">
            &lt;!&ndash;:before-upload="beforeAvatarUpload"&ndash;&gt;
            <el-upload
              class="el-upload-class"
              :show-file-list="false"
              :auto-upload="false"
              :action="ossUrl"
              accept=".mp3,.m4a,.aac"
              :multiple="false"
              :on-change="uploadClick"
              :file-list="fileList">
              <el-button class="width100">+点击上传全程解说</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="全程解说" v-if="form.explainUrl"
          >
            <div class="d-musiz-class">
              <div class="flex-between m-bottom5">
                <div class="flex-align-center">
                  <img src="@/assets/music.png" />
                  {{form.explainUrl}}
                </div>
                <el-button @click="clearExplan" icon="el-icon-close"></el-button>
              </div>
            </div>
            <el-slider
              class="m-slider"
              input-size="small"
              :max="10"
              v-model="form.audioVolume"
              show-input>
            </el-slider>
          </el-form-item>
        </div>
        <div v-if="form.explanationSettings==2">
          <el-form-item label="AI配音"  prop="cameravoiceconfiguration"
                        :rules="!form.cameravoiceconfiguration  ? { required: true, message: '请选择Ai配置', trigger: ['blur','change']} : {required: false}">
            <div class="flex-align-center">
              <div class="ai-class pointer" :class="videoName ? 'ai-blue' : 'ai-btn'" @click="aiSet">{{videoName ? videoName : 'AI配音设置' }}</div>
            </div>
            <el-slider
              class="m-slider"
              input-size="small"
              :max="10"
              v-model="form.audioVolume"
              show-input>
            </el-slider>
            <div>form.cameraTexts++{{form.cameraTexts}}</div>
          </el-form-item>
          <div v-for="(item, index) in form.cameraTexts" :key="index">
            &lt;!&ndash;校检表单&ndash;&gt;
            <el-form-item :label="'全程解说'+(index+1)" :prop="'cameraTexts.'+index+'.content'" :rules="rules.contents">
              <div style="display:flex;">
                <el-input
                  type="textarea"
                  :maxLength="300"
                  :rows="2" v-model="item.content" placeholder="请输入文本" class="e-input" @input="changeMney(item,index)" />
                <el-button class="btn-position" @click="add" v-if="0==index" >+</el-button>
                <el-button class="btn-position" @click="subtract(index)" v-else >-</el-button></div>
            </el-form-item>
          </div>
        </div>-->

        <!--<div class="flex-align-center padding22">
          <div class="font-right flex-align-center">
            视频文字</div>
          <div style="overflow:auto;max-height: 127px" class="flex-wrap flex1">
            <div class="video-padding m-right10 default relative" style="border-radius: 5px;" v-for="(i,j) in formText" :key="j">
              <div class="video-title">{{i.content}}</div>
              <div class="video-title2" v-if="i.subtext">{{i.subtext.content}}</div>
              <div class="flex-between d-text">
                &lt;!&ndash;1封面文字2全程文字&ndash;&gt;
                <div class="v-identifying flex">{{i.textType==2?'全程':'封面'}}</div>
                <div class="d-edit-all flex-align-center">
                  <el-button icon="el-icon-edit" size="mini" class="d-edit" @click="edit(i)"></el-button>
                  <el-button icon="el-icon-delete" size="mini" class="d-edit" @click="delClick(i.id)"></el-button>
                </div>
              </div>
            </div>
            <div class="video-padding flex" style="border-radius: 5px;border:1px solid #87878b" @click="newFont">
              <div style="color: #5F6C83;" class="flex-align-center pointer"><i class="el-icon-plus" style="font-size: 16px;margin-right: 3px"></i>视频文字</div>
            </div>
          </div>
        </div>-->


      </div>
    </el-form>

    <div class="height100px">    </div>
    <div class="fixed-btn-cls flex-end ">
      <div class=" m-bottom20">
        <el-button round @click="resetting" style="z-index: 999;">取消</el-button>
        <el-button type="primary" class="margin20" round  @click="confirm()" style="z-index: 999;">保存配置</el-button>
      </div>
    </div>
    <addscene
      ref="scene"
      @loadText="loadText"></addscene>
    <!--旁白弹框-->
    <narration
      ref="narrationShow" @aiClick="aiClick"></narration>
  </el-drawer>
</template>


<script>
  import Narration from "@/views/lncomingManagement/cameraManage/collectMaterials/components/narration";
  import {musicList} from "@/api/lncomingManagement/music";
  import {ossUpdate2, registerAssetsMedia, userOssSignature} from "@/api/creatCenter/material";
  import { addLongVideo,queryLongDetail } from "@/api/creatCenter/longVideo";
  import {getToken} from "@/utils/token-util";
  import axios from "axios";
  import Addscene from "@/views/creatCenter/longVideo/components/addscene";
  export default {
    components:{Addscene, Narration},
    name: "newLongVideo",
    props:{
      mcList: Array,  // 音乐类型list
      musics: Array,  // 音乐列表list
      visible:Boolean
    },
    /*computed: {
      // 计算‘全程解说’时长——（摄像头配置，每个素材时长集合++）
      timeLength() {
        let timeLength = 0;
        if(this.mulitpleList.length>0){
          for(let i=0;i<this.mulitpleList.length;i++){
            let num = this.mulitpleList[i].materialDuration ? Number(this.mulitpleList[i].materialDuration) : 0
            timeLength+=num
          }
        }
        return timeLength;
      }
    },*/
    data() {
      const defaultForm = {
        explainId:'',
        bgmId:'',
        mediaId: '',
        merchantId: this.$store.state.user.info.merchantId,
        backgroundVolume:5,  //背景音量
        videoVolume:0,  //视频原声音量
        musicSettings:1,  // 选择背景音乐标识—— 1:热门音乐 2：自己上传
        explanationSettings:1, // explanationSettings: 1_自己上传 2_AI配音
        cameravoiceconfiguration:'', // AI配音设置
        // 口播音频需要（摄像头文本）
        cameraTexts:[{
          content:''
        }],
      }
      return {
        defaultForm,
        videoName:'', //AI配音设置 名称
        hint:'',
        loading3:false,
        loading2:false,
        loading:false,
        form:JSON.parse(JSON.stringify(defaultForm)),
        rules: {
          clipName: [
            {
              required: true,
              message: '请输入剪辑名称',
              trigger: 'blur'
            }
          ],
          clipName2: [
            {
              required: true,
              message: '请输入剪辑名称',
              trigger: 'blur'
            }
          ],


          contents: [
            { required: true,
              message: '请输入全程解说文本(限制最大300字）',
              trigger: 'blur' }
          ],
          activityName: [
            {
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            }
          ],

        },


        /*上传视频 start*/
        videoList:{},
        /*上传视频end*/

        /*'全程解说'音频 start*/
        // musicList:[],
        explanList:{},//全程解说
        bgmList:{},//背景音乐
        /*'全程解说'音频 end*/

        // 背景/热榜音乐 start
        musicInfoId:'',//选中的背景音乐类型对象
        musicType:'', // 背景音乐类型
        bgmName:'',  // 选择的音乐名称 未使用
        bgmUrl:'',  // 选择的音乐url地址，用于上传阿里云
        selectIndex: 0,
        musicLists:this.musics, // 音乐列表list
        // end

        fileList: [],

        /*"视频文字" 弹框 start*/
        txtShow: false,
        // 编辑视频文字item
        editInfo: {},

        // 视频文字
        formText: [],
        /*"视频文字" end*/
        titleName:''
      }
    },
    methods: {
      show(id){
        console.log('是否编辑id',id)
        // id存在代表编辑
        if(id){
          //查询长视频详情
          queryLongDetail(
            {
              id:id
            }
          )
            .then((data) => {
              this.form=data.data
              this.titleName=this.form.id?'编辑剪辑':'新建剪辑'
              console.log('查询长视频详情data',data)

              console.log('进入show===========this.mcList',this.mcList,'this.defaultForm',this.defaultForm)
              if(this.mcList&& this.mcList.length>0){
                let info=[]
                // 筛选选中的热门音乐分类
                info=this.mcList.filter((d)=> d.id==this.form.bgmType)
                console.log('热榜音乐回显info======',info,'this.form.bgmType',this.form.bgmType)
                this.changeCategory(info[0])
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }
        else{
          this.titleName='新建剪辑'
        }
      },
      // 切换热门音乐 和 自己上传
      misicClick(){
        this.$set(this.form,'backgroundMusic','')
        this.form.bgmId='' //用于校检
        console.log("切换热门音乐 ",this.form.backgroundMusic)
      },
      /*音乐start*/
      async changeCategory (item) {
        this.musicInfoId=item.id;
        this.musicType=item.name

        this.musicLists = []
        let mcid = item.id_str
        // 热榜音乐接口，需要加username
        let musics = await musicList(mcid,this.$store.state.user.info.username)
        musics && musics['music_list'] ? this.musicLists = musics['music_list'] : void 0
        console.log("this.musicLists",this.musicLists)
      },
      getMusics(e){
        console.log('getMusics===e',e)
        this.form.backgroundMusic=e.title //用于校检
        this.form.bgmId=1
        this.bgmUrl=e.play_url.uri
      },
      /*音乐end*/

      /*视频文字 start*/
      newFont(){
        this.$nextTick(()=>{
          this.$refs['scene'].show()
        })
        console.log('视频文字打开弹框1111111111')
      },
      // 视频文字
      edit (item) {
        console.log('视频文字打开弹框2222',item)
        this.$nextTick(()=>{
          this.$refs['scene'].edit(item)
        })
      },
      // 删除剪辑工程文字
      delClick (id) {
        this.form.longVideoTexts=[]
      },


      loadText (longVideoTexts) {
        this.$set(this.form,'longVideoTexts',longVideoTexts)
        console.log("this.form.longVideoTexts",this.form.longVideoTexts,'form.longVideoTexts.length',this.form.longVideoTexts.length)
        /*// 加载剪辑工程文字
        loadProjectText({
          projectId: this.projectId
        })
          .then((data) => {
            this.formText = data
          })
          .catch((e) => {
            this.$message.error(e.message)
          })*/
      },

      /*视频文字 end*/

      // 清除视频
      clearVideo(){
        this.videoList={}
        this.form.mediaId=''  //全程解说参数名(校检赋值)
        this.form.videoUrl=''
        this.$message.success('删除成功！')
      },
      clearExplan(){
        this.explanList={}
        this.form.explainId=''  //全程解说参数名(校检赋值)
        this.$message.success('删除成功！')
      },
      clearBgm(){
        this.bgmList={}
        this.form.backgroundMusic=''
        this.form.bgmId=''  //背景音乐 参数名(校检赋值)
        this.$message.success('删除成功！')
      },
      getBgm(){
        //视频时长判断
        if(this.form.videoDuration<60){
          this.$message.error('请上传最低一分钟的视频')
          return
        }
        this.loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'hsla(0,0%,100%,.9)'
        });
        if(this.form.musicSettings==2){
          this.save() // 保存成片配置
        }
        else{
          // 热门音乐类型存在，则代表为编辑，或者已上传到阿里云，则return，直接保存
          if(this.form.bgmType){
            this.save() // 保存成片配置
          }
          else{
            this.bgmUrl=this.bgmUrl.replace(new RegExp('https://', 'g'), 'http://');   // https转http
            console.log("this.bgmUrl",this.bgmUrl)
            // 上传背景音乐并注册媒资
            ossUpdate2(this.bgmUrl,this.$store.state.user.info.username)
              .then((data) => {
                let url=data.msg
                registerAssetsMedia({
                  mediaUrl:url,//上传阿里云生成的地址
                  mediaType:'audio/mpeg',//文件类型,已固定，如果需动态，可设置
                  username:this.$store.state.user.info.username
                })
                  .then((mediaData) => {
                    console.log("mediaData",mediaData)
                    // this.musicList.push(data.data)
                    /*this.form.bgmId={
                      // url:data.data.mediaUrl,
                      bgmName:this.bgmName,
                      duration:mediaData.data.duration,
                      mediaId:mediaData.data.mediaId

                    }*/
                    this.form.bgmId=mediaData.data.mediaId   //“背景音乐”媒资id
                    // this.form.backgroundMusic=this.bgmName   //背景音乐名称
                    this.form.bgmType=this.musicInfoId  //背景音乐类型——热门音乐的类型使用回显

                    console.log("this.form.bgmId============",this.form.bgmId)
                    this.save() // 保存成片配置
                  })
                  .catch((e) => {
                    this.$message.error(e);
                    this.loading.close();
                  });
              })
              .catch((e) => {
                this.loading.close();
                this.$message.error(e);
              });
          }
        }
      },

      // 提交
      confirm(){
        // 校检表单
        console.log("this.rules222",this.rules)
        this.$refs.form.validate((valid, obj) => {
          console.log('valid',valid,'obj',obj)
          for(let i in obj){
            console.log("i",i)
            console.log("obj=========",obj[i][0].message)
            this.hint=obj[i][0].message
            break
          }
          console.log('this.hint',this.hint,'this.tableSuccess',this.tableSuccess)

          if (valid) {
            this.getBgm()
          } else {
            console.log("进入非空提示",valid,'22',this.form)
            this.$message.error(this.hint)
            return false;
          }
        });
      },

      save(){
        // 保留两个需要的字段 deviceSerial(序列号)
        /*this.musicList = this.musicList.map(({mediaId,fileName,duration})=>{
          return {mediaId,bgmName:fileName,duration};
        })*/

        // this.form.explainId=this.explanList   //全程解说参数名
        console.log('保存this.form111==========', this.form)
        // explanationSettings: 1_自己上传 2_AI配音
        if(this.form.explanationSettings==2){
          delete this.form.explainId
        }
        if(this.form.explanationSettings==1){
          delete this.form.cameravoiceconfiguration
          this.videoName=''
        }
        // Object.assign( this.form, {
        // })
        console.log('保存this.form2222==========', this.form)
        // 背景音乐缩小5倍
        // 视频原声 缩小10倍
        this.form.backgroundVolume = this.form.backgroundVolume / 5  //背景音量
        this.form.videoVolume = this.form.videoVolume / 10  //视频原声
        addLongVideo(this.form)
          .then((data) => {
            console.log('保存长视频data',data)
            let hint=this.form.id?'编辑成功':'保存成功'
            this.$message.success(hint)
            this.loading.close();
            this.updateVisible(false)
          })
          .catch((e) => {
            this.loading.close();
            this.$message.error(e);
          });
      },
      // 重置
      resetting(){
        this.updateVisible(false)
      },

      // 保存后清除
      saveClear(){
        if(this.mcList&& this.mcList.length>0){
          this.changeCategory(this.mcList[0])
          this.form.backgroundMusic=''
          this.form.bgmId='' //用于校检
        }

        this.onDone();
        // 清除 start
        this.form = JSON.parse(JSON.stringify(this.defaultForm))   // 恢复默认的
        // 清空旁白设置
        this.$nextTick(()=>{
          this.$refs['narrationShow'].clear()
        })
        this.videoName=''  // 旁白按钮文字清空

        // 删除全程解说
        this.explanList={}
        this.form.explainId=''  //全程解说参数名(校检赋值)
        this.bgmList={}
        this.form.backgroundMusic=''
        // 清空‘采集时间段’
        this.selTimeList=[]
        // 清除 end
        // this.form = { ...this.defaultForm }
        // this.form=this.form
      },

      // 解说设置
      explainSet(e){
        console.log('e',e)
        if(e==2){
          this.$nextTick(()=>{
            this.$refs['narrationShow'].show()
          })
        }
      },
      // start
      aiSet(){
        this.$nextTick(()=>{
          this.$refs['narrationShow'].show()
        })
      },


      // 文本start
      changeMney(data,index){
        console.log("进入修改=========")
        this.form.cameraTexts[index].content=data.content;
        let arr=[];  //新数组
        this.form.cameraTexts.forEach(item=>{
          arr.push(item);
        })
        this.form.cameraTexts=arr;//相当于返回一个新数组可以触发渲染
        console.log('this.form.cameraTexts',this.form.cameraTexts)

      },
      //  加
      add(){
        let content={content:''}
        this.form.cameraTexts.push(content)
        console.log('this.form.cameraTexts',this.form.cameraTexts,this.form.cameraTexts.length)
      },
      //减
      subtract(index){
        this.form.cameraTexts.splice(index, 1)
        console.log("this.form.cameraTexts",this.form.cameraTexts,this.form.cameraTexts.length)
      },
      // end


      /* 更新 visible */
      updateVisible(value) {
        if(value==false){
          console.log("进入false======",this.form,'this.defaultForm',this.defaultForm)
          this.saveClear()
          // this.form = { ...this.defaultForm }

        }
        this.$emit('update:visible', value);
      },
      hintClick(){
        if(this.form.explainId){
          this.$message.error('最多上传一条全程解说！可删除重试')
          return
        }
      },
      // 全程解说上传前操作——暂未使用
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 20;
        console.log('全程解说上传前操作this.form.explainId=======',this.form.explainId,'this.form',this.form)
        if(this.form.explainId){
          this.$message.error('最多上传一条全程解说！可删除重试')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 20MB!');
        }
        return !this.form.explainId && isLt2M;
      },
      // 上传视频
      uploadClickVideo(file){
        console.log("上传视频uploadClickVideo",file,'this.form.',this.form,this.form.mediaId)
        if(this.form.mediaId){
          this.$message.error('最多上传一条视频！可删除重试')
          return
        }
        console.log("进入点击事件",this.form)
        this.fileList.push(file)
        this.selectVideo(3);
      },
      // 上传背景音乐
      uploadClickBj(file){
        console.log("this.form.backgroundMusic",this.form.backgroundMusic)
        if(this.form.backgroundMusic){
          this.$message.error('最多上传一条背景音乐！可删除重试')
          return
        }
        console.log("进入点击事件",this.bgmList,this.bgmList.mediaId,'form.backgroundMusic',this.form.backgroundMusic)
        this.fileList.push(file)
        this.loading3=true
        this.selectVideo(2);
      },
      // 上传全程解说 _暂无，暂未使用，使用 this.loading2 不需要使用上传加载中和上传中禁用按钮
      uploadClick(file){
        if(this.form.explainId){
          this.$message.error('最多上传一条全程解说！可删除重试')
          return
        }
        console.log("进入点击事件",this.explanList,this.form.explainId)
        this.fileList.push(file)
        this.selectVideo(1);
      },
      async selectVideo(classify){
        //classify 1:全程解说 2：背景音乐 3：上传视频
        console.log(" this.fileList", this.fileList)
        if(this.fileList.length < 1) {
          console.log("请选择文件后提交")
          return
        }

        if(classify==3){
          let isLt = true
          for(let i=0;i<this.fileList.length;i++){
            // 判断是否小于2mb
            if(this.fileList[i].size / 1024 / 1024 > 300){
              isLt=false
            }
          }
          if (!isLt) {
            for(let i=0;i<this.fileList.length;i++){
              // 判断是否小于2mb
              if(this.fileList[i].size / 1024 / 1024 > 300){
                this.fileList.splice(i,1)
              }
            }
            this.$message.error("请上传小于300MB的视频文件");
            return
          }
          this.loading2=true
        }

        console.log('组件调用2222================================')
        this.data = await userOssSignature()
        let file = this.fileList[0].raw
        console.log(file)
        this.filename=file.name;
        let markIndex=( this.filename).lastIndexOf('.');
        let suffix= this.filename.substring(markIndex)
        let date=new Date().getTime();
        // 构建请求参数
        let param = new FormData()
        param.append("key", this.data.dir + date + '_.' + file.name.split('.')[0]+suffix)
        param.append("policy", this.data.policy)
        param.append("OSSAccessKeyId", this.data.accessId)
        param.append("success_action_status", '200')
        // param.append("callback",  this.data.callback)     //回调（not)
        param.append("signature", this.data.signature)
        param.append("file", file, file.name)
        param.append('success_action_status', '200')
        console.log("this.data",this.data,'date+suffix',date+suffix,'file.name',file.name)
        let config = {
          headers: {
            'Access-Control-Allow-Origin': '*',
            'x-oss-callback-Authorization': getToken()
          }
        }
        console.log("suffix",suffix)
        axios.post(this.data.host, param, config).then(res => {
          if(res.status==200){
            console.log('this.data.host',this.data.host+'/'+date+suffix)
            let url=this.data.host+'/'+date + '_.' + file.name.split('.')[0]+suffix;
            let type=file.type;
            console.log('file.type',file.type)
            this.fileList=[]
            this.registerMedias(url,type,classify);
          }
          else{
            this.$message.error('上传失败');
            this.loading2=false
            this.loading3=false
          }

        }).catch(err => {
          console.log(err)
          this.loading2=false
          this.loading3=false
        })
      },
      registerMedias(url,type,classify) {
        registerAssetsMedia({
          mediaUrl:url,//上传阿里云生成的地址
          mediaType:type,//文件类型
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            this.$message.success("上传成功！")
            console.log("data",data)
            // this.musicList.push(data.data)

            //classify 1:全程解说 2：背景音乐
            if(classify==1){
              this.explanList={
                url:data.data.mediaUrl,
                fileName:data.data.fileName.split('_.')[1],
                duration:data.data.duration,
                mediaId:data.data.mediaId

              }
              this.form.explainUrl=data.data.fileName.split('_.')[1]   //“全程解说”名称
              console.log("this.explanList============",this.explanList)
              this.form.explainId=data.data.mediaId   //“全程解说”媒资id
              this.form.longVideoCommentaries=[{
                audioMediaId:data.data.mediaId,  // "全程解说/ai配音" 媒资id
                mediaDuration:data.data.duration,  // "全程解说/ai配音" 媒资时长
              }]
            }
            // “自己上传” 背景音乐
            if(classify==2){
              this.loading3=false
              this.bgmList={
                url:data.data.mediaUrl,
                fileName:data.data.fileName.split('_.')[1],
                duration:data.data.duration,
                mediaId:data.data.mediaId

              }
              console.log("this.bgmList============",this.bgmList)
              this.form.bgmId=data.data.mediaId   //“背景音乐”媒资id
              this.form.backgroundMusic=data.data.fileName.split('_.')[1]   //背景音乐名称
            }
            if(classify==3){
              this.loading2=false
              this.videoList={
                url:data.data.mediaUrl,
                fileName:data.data.fileName.split('_.')[1],
                duration:data.data.duration,
                mediaId:data.data.mediaId

              }

              /*  mediaId:'',  //“上传视频”媒资id
        videoUrl:'',  //“上传视频”url

        bgmId:'',  //“背景音乐”媒资id

        explainId:'',  //“全程解说”媒资id*/
              console.log("this.videoList============",this.videoList)
              this.form.mediaId=data.data.mediaId   //“上传视频”媒资id
              this.form.videoUrl=data.data.mediaUrl   //“上传视频”url
              this.form.videoDuration=data.data.duration   //“上传视频”时长
            }

          })
          .catch((e) => {
            this.$message.error(e);
            this.loading3=false
            this.loading2=false
          });
      },
      // AI配音设置返回
      aiClick(form,name){
        console.log('AI配音设置返回form',form,name)
        this.form.cameravoiceconfiguration=form
        this.videoName=name
      },
      /* 完成刷新列表数据 */
      onDone() {
        this.$emit('load')
      },
    }
  }
</script>

<style scoped lang="less">
  .m-slider{
    margin: 10px 0  0 20px;
  }

  .btn-position{
    margin-left: 20px;
  }
  .ai-class{
    margin: 0 10px 0 0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .ai-blue{
    color: #fff;
    background: #93c7f5;
  }
  .ai-btn{
    color: #606266;
    border: 1px solid #dddddd;
  }

  .ai-btn:hover {
    /*background: rgba(50,62,78, 0.5);*/
    background: #e6f7ff;
    color:#1890ff;
    border: 1px solid #1890ff;
  }
  .ai-blue:hover {
    background: #2d90e8;
  }

  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }
  .d-musiz-class{
    border:1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px 0;
    .m-bottom5{
      margin-bottom: 5px;
    }
    img{
      width: 23px;
      margin-right: 10px;
    }
    button{
      border: none;
      padding: 5px 10px;
      font-size: 16px;
    }
  }
  .video-flex{
    display: flex;
    margin-bottom: 10px;

    .uoload-video-title{
      width: 98px;
      text-align: right;
      margin-right: 14px
    }
    .del-video-btn{
      position: absolute;
      top: 0px;
      right: 0px;
      border: none !important;
      /*border-radius: 50%;*/
      width: 35px !important;
      height: 35px !important;
      font-size: 19px;
      background:  rgba(255, 0, 0, 0);
      padding: 0 !important;
    }
  }
  .s-musiz-class{
    border:1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px 0 5px;
    .m-bottom5{
      margin-bottom: 5px;
    }
    img{
      width: 23px;
      margin-left: 5px;
    }
  }

  /*视频文字*/
  .video-padding{
    height: 100px;
    background: #fff;
    /*min-width: 201px;*/
    width: 501px;
    padding:6px 12px 9px;
    margin-bottom: 10px;

    .video-title{
      font-size: 16px;
      font-weight: bold;
    }
    .video-title3{
      font-size: 14px;color: #ABAFB5;
      /*margin: 10px 0;*/
    }
    .video-title2{
      font-size: 14px;color: #ABAFB5;
      line-height: 20px;
      /*margin: 10px 0;*/
    }
    .d-text{
      position: absolute;
      bottom: 12px;
      width: 90%;
    }
    .v-identifying{
      font-size: 14px;color: #FFFFFF;width: 40px;
      height: 20px;
      background: #31A952;
    }
    .d-edit-all{
      width: 60px;
      height: 25px;
      border-radius: 100px;
      /*background: #1B2531;*/
    }
    .d-edit{
      width: 30px;
      height: 25px;
      border-radius: 100px;
      border: none;
      margin: 0;
      padding: 0;
    }
  }
  .height100px{
    height: 100px;
  }
  .fixed-btn-cls{
    z-index: 9999;
    position: fixed;
    bottom: 0;
    right: 0;
    height: 90px;
    width:75%;
    background: #fff;
  }
</style>
